<template>
	<view class="">
		<view class="box">
			<!-- :animation="animationData" -->

			<!-- <image class="img" src="https://testqiniu.pinqiart.com/xiaochengxuback.jpg" mode=""></image> -->
			<image class="img" src="https://qiniu.pinqiart.com/xiaochengxuback.jpg" mode=""></image>
			<view class="gif">
				<image class="img" src="https://qiniu.pinqiart.com/index.gif" mode=""></image>
			</view>
			<view class="logo">
				<image src="../../static/indexLogo.png"></image>
			</view>
			<view class="btn-big" @click="skip(1)">
				<image src="../../static/index1.png"></image>
			</view>
			<view class="btn-big" @click="skip(2)">
				<image src="../../static/index2.png"></image>
			</view>
			<view class="btn-big" @click="skip(3)">
				<image src="../../static/index3.png"></image>
			</view>
			<view class="btn-small">
				<view class="btn" @click="skip(4)">
					<image src="../../static/index4.png"></image>
				</view>
				<view class="btn" @click="skip(5)">
					<image src="../../static/index5.png"></image>
				</view>
				<view class="btn" @click="skip(6)">
					<image src="../../static/index6.png"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		userInfo,
		wxLogin,
		updateUserInfo
	} from "@/api/public.js"
	export default {
		data() {
			return {
				isScale: false,
				off: false,
				animationData: {},
				userData: {},
			}
		},
		mounted() {
			this.isScale = true;
			// if (uni.getStorageSync("sessionId")) {

			// } else {
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: function(loginRes) {
			// 			wxLogin(loginRes.code).then(res => {
			// 				uni.setStorageSync("sessionId", res.reData.sessionId);
			// 				userInfo().then(res => {
			// 					if (res.reData.data) {
			// 						uni.setStorageSync("userData", JSON.stringify(res.reData
			// 							.data));
			// 					}
			// 				})
			// 			});
			// 		},
			// 	});
			// }

		},
		onShow: function() {
			uni.hideTabBar()
		},
		onHide() {
			uni.showTabBar()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 定义动画内容
			rotateAndScale() {
				// 定义动画内容
				this.animation.scale(1.3, 1.5).translate('20%', '-5%').step()
				// 导出动画数据传递给data层
				this.animationData = this.animation.export()
			},
			skip(type) {
				console.log(type)
				switch (type) {

					case 1:
						uni.navigateTo({
							url: "../mine/createArtwork"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "../hypermarket/artworkList"
						})
						uni.setStorageSync("footNum", 1);
						break;

					case 3:
						uni.navigateTo({
							url: "../hypermarket/hypermarket"
						})
						uni.setStorageSync("footNum", 2);
						break;
					case 4:
						uni.navigateTo({
							url: "../mine/gameCollect"
						})


						break;
					case 5:
						uni.navigateTo({
							url: "../shoppingCart/shoppingCart"
						})
						uni.setStorageSync("footNum", 4);
						break;
					case 6:
						uni.navigateTo({
							url: "../mine/mine"
						})
						uni.setStorageSync("footNum", 5);
						break;
				}

			},
		},
		// 分享配置
		onShareAppMessage(res) {
			return {
				title: "",
				path:"pages/index/choose",
				imageUrl: this.artworkData.thumb
			}
		},
		// 分享配置
		onShareTimeline(res) {
			return {
				title: "",
				path: "pages/index/choose",
				imageUrl: ""
			}
		},

	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-top: 10vh;

		.gif {
			width: 500rpx;
			height: 500rpx;
			position: fixed;
			bottom: 15%;
			right: 14%;
			z-index: -1;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.logo {
			height: 180rpx;
			padding: 0 30rpx;
			text-align: right;

			image {
				height: 100%;
				display: inline-block;
				width: 450rpx;
			}
		}

		.btn-big {
			height: 130rpx;
			margin-top: 60rpx;
			text-align: right;
			padding: 0 30rpx;
			position: relative;
			z-index: 100;

			image {
				height: 100%;
				display: inline-block;
				width: 420rpx;
			}


		}


		.btn-small {
			box-sizing: border-box;
			// margin-top: 24vh;
			padding-right: 2%;
			height: 70rpx;
			display: flex;
			justify-content: flex-end;
			position: fixed;
			bottom: 100rpx;
			right: 0;
			width: 100%;

			.btn {
				width: 200rpx;
				height: 100%;
				margin: 0 6rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}
		}
	}
</style>
